// modify
// Name:                       Forms
//
// Description:                Define style for form elements
//
// Component:                 `.am-form`
//
// Modifiers:                  ``
//
// =============================================================================

/* ==========================================================================
   Component: Form
 ============================================================================ */


/* Normalize */

// Restyle and baseline non-control form elements.
fieldset {
    border: none;
}

legend {
    display: block;
    width: 100%;
    margin-bottom: @line-height-computed;
    font-size: (@form-font-size * 1.25);
    line-height: inherit;
    color: @legend-color;
    border-bottom: 1px solid @legend-border-color;
    padding-bottom: 0.5rem;
}

label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
}

// Normalize form controls
// Override content-box in Normalize
input[type="search"] {
    box-sizing: border-box;
}

// Position radios and checkboxes better
input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    /* IE8-9 */
    line-height: normal;
}

// Set the height of select and file controls to match text inputs
input[type="file"] {
    display: block;
}

// Make multiple select elements height not fixed
select[multiple], select[size] {
    height: auto;
}

// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
select optgroup {
    font-size: inherit;
    font-style: inherit;
    font-family: inherit;
}

// Focus for select, file, radio, and checkbox
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
    .tab-focus();
}

// Fix for Chrome number input
// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
// See https://github.com/twbs/bootstrap/issues/8350 for more.
input[type="number"] {
    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
        height: auto;
    }
}

// Adjust output element
output {
    display: block;
    padding-top: @global-spacing;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @input-color;
    vertical-align: middle;
}


/* Common form controls */

.@{ns}form select, .@{ns}form textarea, .@{ns}form input[type="text"], .@{ns}form input[type="password"], // `datetime` has been removed from WHATWG HTML
// https://github.com/whatwg/html/issues/336
.@{ns}form input[type="datetime"], .@{ns}form input[type="datetime-local"], .@{ns}form input[type="date"], .@{ns}form input[type="month"], .@{ns}form input[type="time"], .@{ns}form input[type="week"], .@{ns}form input[type="number"], .@{ns}form input[type="email"], .@{ns}form input[type="url"], .@{ns}form input[type="search"], .@{ns}form input[type="tel"], .@{ns}form input[type="color"], .@{ns}form-field, .@{ns}textarea {
    display: block;
    flex: 1;
    width: 100%;
    padding: @input-padding;
    font-size: @form-font-size;
    line-height: @form-line-height;
    font-size: @global-font-size - 0.2;
    color: @input-color;
    vertical-align: middle;
    background-color: @input-bg;
    background-image: none;
    border: 1px solid @input-border;
    border-radius: @input-border-radius;
    -webkit-appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    .hook-form;
    // `:focus` state
    &:focus {
        outline: 0;
    }
    .form-field-focus(@input-border-focus);
    &::placeholder {
        color: @input-color-placeholder;
    }
    &::-moz-placeholder {
        opacity: 1;
    }
    // Disabled and read-only inputs
    &[disabled], &[readonly], fieldset[disabled] & {
        cursor: not-allowed;
        background-color: @input-bg-disabled;
        .hook-form-disabled;
    }
    &.@{ns}radius {
        border-radius: @radius-normal;
    }
    &.@{ns}round {
        border-radius: @global-rounded;
    }
}

.@{ns}form {
    // Reset height for block field
    textarea, select[multiple], select[size] {
        height: auto;
    }
    select {
        // via Foundation
        -webkit-appearance: none !important;
        -moz-appearance: none !important; // since Firefox 31 ?
        -webkit-border-radius: @global-radius;
        background: #fff url('') no-repeat 100% center;
        &[multiple="multiple"] {
            background-image: none;
        }
    }
}

// #868
// fixes datetime input height on old webkit browsers
// @see http://stackoverflow.com/questions/18967852/input-type-date-in-ios-7
input[type="datetime-local"], input[type="date"] {
    .datetime-height(@font-size) {
        @rem-height: @font-size * (unit(@input-padding) * 2+@form-line-height);
        height: floor(unit(@rem-height) * 10 + 2) * 1px;
    }
    .@{ns}form &, &.@{ns}form-field {
        .datetime-height(@form-font-size);
        &.@{ns}input-sm {
            .datetime-height(@form-font-size-sm);
        }
        .@{ns}input-lg {
            .datetime-height(@form-font-size-lg);
        }
    }
}


/* help text */

.@{ns}form-help {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: @gray-light;
    font-size: 1.3rem;
}


/* form group */

.@{ns}form-group {
    margin-bottom: 1.5rem;

    .error-notice {
        font-size: @global-font-size - 0.4;
        line-height:  1;
        margin: 4px 0;
    }
}


/* file field */

.@{ns}form-file {
    position: relative;
    overflow: hidden;
    input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        opacity: 0;
        cursor: pointer;
        font-size: 50rem;
    }
}


/**
 * Checkboxes and radios
 * Indent the labels to position radios/checkboxes as hanging controls.
*/

// fix by me
// .@{ns}radio, .@{ns}checkbox {
//     display: block;
//     min-height: @form-font-size * @form-line-height;
//     margin-top: 10px;
//     margin-bottom: 10px;
//     padding-left: 20px;
//     vertical-align: middle;
//     label {
//         display: inline;
//         margin-bottom: 0;
//         font-weight: normal;
//         cursor: pointer;
//     }
// }

.@{ns}radio input[type="radio"], .@{ns}radio-inline input[type="radio"], .@{ns}checkbox input[type="checkbox"], .@{ns}checkbox-inline input[type="checkbox"] {
    // fix bu me
    // float: left;
    // margin-left: -18px;
    // outline: none;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
}

// .@{ns}radio+.@{ns}radio, .@{ns}checkbox+.@{ns}checkbox {
//     margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
// }


/* Radios and checkboxes inline */

.@{ns}radio-inline, .@{ns}checkbox-inline {
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
}

.@{ns}radio-inline+.@{ns}radio-inline, .@{ns}checkbox-inline+.@{ns}checkbox-inline {
    margin-left: 10px; // space out consecutive inline controls
}

// Apply same disabled cursor tweak as for inputs
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"], input[type="checkbox"], .@{ns}radio, .@{ns}radio-inline, .@{ns}checkbox, .@{ns}checkbox-inline {
    &[disabled], fieldset[disabled] & {
        cursor: not-allowed;
        .hook-form-disabled;
    }
}


/* Form field feedback states */

// Warning
.@{ns}form-warning {
    .form-field-validation(@state-warning-text;
    @state-warning-text);
    .@{ns}textarea,
    .@{ns}form-field {
        .form-field-validation-filed(@state-warning-text;
        @state-warning-text);
    }
    .hook-form-warning;

    .error-notice {
        color: @global-warning;
    }
}

// Error
.@{ns}form-error {
    .form-field-validation(@state-danger-text;
    @state-danger-text);
    .hook-form-error;
}

.@{ns}form-error .@{ns}form-field, .@{ns}field-error {
    .form-field-validation-filed(@state-danger-text;
    @state-danger-text);
}

// Success
.@{ns}form-success {
    .form-field-validation(@state-success-text;
    @state-success-text);
    .hook-form-success;
}

.@{ns}form-success .@{ns}form-field, .@{ns}field-valid {
    .form-field-validation-filed(@state-success-text;
    @state-success-text);
}


/* Horizontal forms */

.@{ns}form-horizontal {
    .@{ns}form-label, .@{ns}radio, .@{ns}checkbox, .@{ns}radio-inline, .@{ns}checkbox-inline {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0.6em;
    }
    .@{ns}form-group {
        .clearfix();
    }
    @media @medium-up {
        .@{ns}form-label {
            text-align: right;
        }
    }
    .hook-form-horizontal;
}


/* Inline form elements */

.@{ns}form-inline {
    @media @medium-up {
        .@{ns}form-group {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
        }
        .@{ns}form-field {
            display: inline-block;
            width: auto;
            vertical-align: middle;
        }
        .@{ns}input-group {
            display: inline-table;
            vertical-align: middle;
            .@{ns}input-group-label, .@{ns}input-group-btn, .@{ns}form-label {
                width: auto;
            }
        }
        // Input groups need that 100% width though
        .@{ns}input-group>.@{ns}form-field {
            width: 100%;
        }
        .@{ns}form-label {
            margin-bottom: 0;
            vertical-align: middle;
        }
        // Remove default margin on radios/checkboxes that were used for stacking, and
        // then undo the floating of radios and checkboxes to match (which also avoids
        .@{ns}radio, .@{ns}checkbox {
            display: inline-block;
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 0;
            vertical-align: middle;
        }
        .@{ns}radio input[type="radio"], .@{ns}checkbox input[type="checkbox"] {
            float: none;
            margin-left: 0;
        }
    }
    .hook-form-inline;
}


/* Form field size */

.@{ns}input-sm {
    font-size: @form-font-size-sm !important;
}

.@{ns}input-lg {
    font-size: @form-font-size-lg !important;
}

.@{ns}form-group-sm {
    .@{ns}checkbox, .@{ns}radio, .@{ns}form-label, .@{ns}form-field {
        font-size: @form-font-size-sm !important;
    }
}

.@{ns}form-group-lg {
    .@{ns}checkbox, .@{ns}radio, .@{ns}form-label, .@{ns}form-field {
        font-size: @form-font-size-lg !important;
    }
    input[type="radio"], input[type="checkbox"] {
        margin-top: 7px;
    }
}


/* Form field feedback states */

.@{ns}form-icon {
    position: relative;
    .@{ns}form-field {
        padding-left: @input-padding + 1.25 !important;
    }
    // form-group without label
    [class*='@{ns}icon-'] {
        position: absolute;
        left: @input-padding;
        top: 50%;
        display: block;
        margin-top: -@input-padding;
        line-height: 1;
        z-index: 2;
    }
    // form-group with label
    label~[class*='@{ns}icon-'] {
        top: 70%;
    }
    .hook-form-icon;
}


/* Feedback Icon */

.@{ns}form-feedback {
    position: relative;
    .@{ns}form-field {
        padding-left: @input-padding !important;
        padding-right: @input-padding + 1.25 !important;
    }
    [class*='@{ns}icon-'] {
        right: @input-padding;
        left: auto;
        // with label & horizontal mode
        .@{ns}form-horizontal & {
            right: @input-padding + 1.1;
        }
    }
    .hook-form-feedback;
}


/* Form set */

.@{ns}form-set {
    margin-bottom: 1.5rem;
    padding: 0;
    >input {
        position: relative;
        top: -1px;
        border-radius: 0 !important;
        &:focus {
            z-index: 2;
        }
        &:first-child {
            top: 1px;
            .border-top-radius(~"@{input-border-radius} !important");
        }
        &:last-child {
            top: -2px;
            .border-bottom-radius(~"@{input-border-radius} !important");
        }
    }
    .hook-form-set;
}

// Hooks
// =============================================================================
.hook-form() {}

.hook-form-disabled() {}

.hook-form-horizontal() {}

.hook-form-inline() {}

.hook-form-icon() {}

.hook-form-feedback() {}

.hook-form-set() {}

.hook-form-error() {}

.hook-form-warning() {}

.hook-form-success() {}
